<template>
  <h2>reactive</h2>
  <span>{{ data.count }}</span>
  <button @click="add">btn</button>
</template>

<script>
// reactive也是用于创建响应式数据
import { reactive, ref } from "vue";
export default {
  setup() {
    // ref是定义一个变量，reactive用于一次性定义多个变量

    // 尽量使用ref, 当有form表单的时候，那么使用reactive会更加方便
    const data = reactive({
      count: 3,
      name: "zhangsan",
      age: 100,
    });

    const add = () => {
      data.count++;
    };

    return { data, add };
  },
};
</script>
